<template>
    <div>
        {{ student.name }}-{{ student.age }}-{{ student.gender }}
    </div>
</template>

<script setup>
import { ref, watch } from 'vue';

let student = ref({
    name: '张三',
    age: 23,
    gender: '男'
});
// 注意这里的student.value不是一个普通的值，也是一个代理对象
watch(student.value, (newValue, oldValue) => {
    console.log(newValue);
    console.log(oldValue);
});

setTimeout(() => {
    student.value.name = '李四';
}, 2000);
</script>
<!-- <script>
import { ref, watch } from 'vue';

export default {
    setup() {
        let student = ref({
            name: '张三',
            age: 23,
            gender: '男'
        });

        // watch(student, (newValue, oldValue) => {
        //     console.log(newValue);
        //     console.log(oldValue);
        // }, { deep: true });

        watch(student.value, (newValue, oldValue) => {
            console.log(newValue);
            console.log(oldValue);
        });

        setTimeout(() => {
            student.value.name = '李四';
        }, 2000);

        return {
            student
        }
    }
}
</script> -->